<template>
  <div>
    <h1>方法的使用</h1>
    <el-input v-model="username" ref="inputs" @blur="blurEvent" @focus="focusEvent"></el-input>
    <el-button @click="focusInputs">focus方法</el-button>
    <el-button @click="blurInputs">blur方法</el-button>
  </div>
</template>

<script>
export default {
  name: "InputMethods",
  data() {
    return {
      username: ''
    }
  },
  methods: {
    // 调用 focus 方法
    focusInputs() {
      this.$refs.inputs.focus();
    },
    // 调用 blur 方法
    blurInputs() {
      this.$refs.inputs.blur();
    },
    blurEvent() {
      console.log("失去焦点");
    },
    focusEvent() {
      console.log("获得焦点");
    }
  }
}
</script>

<style scoped>

</style>
